<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <title>Vue-FPS</title>
    <!--引入第三方的jquery脚本库-->
    <script include="vue" exclude="plugin" src="./static/libs/include-mapboxgl-local.js"></script>
    <style type="text/css">
      #main {
          margin: 0 0;
          width: 100%;
          height: 100vh;
      }
      #map {
          height: 100vh;
          width: 100%;
      }
      .custom {
          background: #ffffff;
          padding: 16px;
      }
    </style>
  </head>

  <body>
    <div id="app">
      <mapgis-web-map
        id="map"
        :map-style="mapStyle"
        :zoom="mapZoom"
        :center="outerCenter"
        :crs="mapCrs"
        v-on:load="handleMapLoad"
        >
        <mapgis-ogc-wmts-layer
          :layer-id="layerWmtsId"
          :source-id="sourceWmtsId"
          :base-url="wmtsurl"
          :tile-matrix-set="tileMatrixSet"
          :wmts-layer="layer"
          :format="format"
          :token="token">
        </mapgis-ogc-wmts-layer>
        <mapgis-rastertile-layer
          :layer-id="layerRasterId"
          :source="sourceRaster"
          :source-id="sourceRasterId"
          >
        </mapgis-rastertile-layer>
        <mapgis-popup :coordinates="coordinates1" :anchor="anchor" :showed="show">
          <div class="custom">独立显示</div>
        </mapgis-popup>
        <mapgis-marker :coordinates="coordinates2" :color="color2"> </mapgis-marker>
        <mapgis-marker :coordinates="coordinates3" :color="color3">
          <mapgis-popup :anchor="anchor" :showed="show"> <div class="custom">绑定Marker显示</div> </mapgis-popup>
        </mapgis-marker>
      </mapgis-web-map>
    </div>
    <script>
      new Vue({
          el: '#app',
          data() {
              return {
                  mapStyle: {
                      //设置版本号，一定要设置
                      version: 8,
                      //添加来源
                      sources: {},
                      //设置加载并显示来源的图层信息
                      layers: []
                  }, // 地图样式
                  mapZoom: 3, // 地图初始化级数
                  outerCenter: [116.39, 40.2], // 地图显示中心
                  mapCrs: 'EPSG:4326',

                  layerWmtsId: 'ogcwmts_layerId',
                  sourceWmtsId: 'ogcwmts_sourceId',
                  wmtsurl: 'http://t0.tianditu.gov.cn/img_c/wmts',
                  layer:"img",
                  tileMatrixSet:"c",
                  format:"tiles",
                  token: {
                            key: 'tk',
                            value: 'f5347cab4b28410a6e8ba5143e3d5a35'
                        },
                  sourceRaster: {
                      type: 'raster',
                      tiles: ['http://t0.tianditu.com/DataServer?T=cia_c&L={z}&Y={y}&X={x}&tk=9c157e9585486c02edf817d2ecbc7752']
                  },
                  layerRasterId: 'raster_layerId',
                  sourceRasterId: 'raster_sourceId',

                  color1: '#F3F5F7',
                  color2: '#52B883',
                  color3: '#37495E',
                  offset: [20, 20],
                  coordinates1: [110, 30],
                  coordinates2: [90, 40],
                  coordinates3: [120, 50],

                  anchor: 'top',
                  show: true,
              };
          },
          methods: {
              handleMapLoad(payload) {
                  this.map = payload.map;
              }
          }
      });
    </script>
  </body>
</html>
